<template>
  <Navbar title="质押" />
  <div class="content bg-dollar">
    <div class="panel">
      <div class="income">
        <p>待领取收益</p>
        <p>已领取收益</p>
      </div>
      <div class="extract-inputs">
        <p>提取</p>
        <p>投入USDT</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar/index.vue'
import { showToast } from 'vant';
import Clipboard from 'clipboard'

// 地址
const address = location.href
// 邀请链接
const invitationLink = location.origin + location.pathname

const copyText = () => {
  var clipBoard = new Clipboard('.copy_btn')
   clipBoard.on('success', function() {
       clipBoard.destroy()
       clipBoard = new Clipboard('#btn')
       showToast('复制成功')
   })
   clipBoard.on('error', function() {
      showToast('复制失败，请手动复制')
   })
}
</script>

<style scoped lang='scss'>
.content {
  padding-top: 2.875rem;
  min-height: 100vh;
  overflow: hidden;
}
.panel {
  border-radius: 0.55rem;
  margin: 2.875rem 1.25rem;
  padding: 1.5625rem 0.9375rem;
  background-color: #fff;
  background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(71, 71, 107, 0.8) 71.33%);
  .income {
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      left: 50%;
      top: -50%;
      width: 1px;
      height: 2rem;
      background: #d3defc;
    }
    p {
      flex: 1;
      text-align: center;
      color: #d3defc;
    }
  }
  .extract-inputs {
    display: flex;
    justify-content: space-evenly;
    gap: 2rem;
    margin-top: 3rem;
    p {
      flex: 1;
      text-align: center;
      color: #000;
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 0.875rem;
      border-radius: 0.3rem;
      &:first-child {
        background: linear-gradient(180deg,#bdcfff,#859fe3);
      }
      &:last-child {
        background: #ffa845;
      }
    }
  }
}
</style>